<template>
  <div>
    <section class="header">
      <i class="iconfont iconfanhui1" @click="goBack()"></i>
      <span @click="goBack()">订单详情</span>
    </section>
    <div class="main-content">
      <el-descriptions title="信息详情">
        <el-descriptions-item label="订单号">
          {{ info.orderNo }}</el-descriptions-item
        >
        <el-descriptions-item label="订单类型"
          ><el-tag size="small">
            {{ info.orderTypeId | orderTypeFormatter(second) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="账户ID">
          {{ info.accountId }}</el-descriptions-item
        >

        <el-descriptions-item label="操作前余额">
          {{ info.balanceBeforeOperation | moneyFilters }}</el-descriptions-item
        >
        <el-descriptions-item label="余额">{{
          info.balance | moneyFilters
        }}</el-descriptions-item>
        <el-descriptions-item label="金额">{{
          info.amount | moneyFilters
        }}</el-descriptions-item>
        <el-descriptions-item label="操作对象">
          {{
            info.operationObjectType | operationObjectTypeFilter
          }}</el-descriptions-item
        >
        <el-descriptions-item label="订单状态">
          {{ info.orderStatus | orderStatusFormatter }}</el-descriptions-item
        >
        <el-descriptions-item label="未开发票">
          {{ info.isInvoice | isInvoiceFormatter }}</el-descriptions-item
        >
        <el-descriptions-item label="备注" v-if="info.remark">
          {{ info.remark }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="main-content">
      <div class="content-header clearfix" v-if="info.orderVoucherPath">
        <div class="title">收款凭证</div>
      </div>
      <div class="input-box margin-bottom" v-if="info.orderVoucherPath">
        <el-image
          style="width: 100px; height: 100px"
          :src="info.orderVoucherPath"
          :preview-src-list="srcList"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "billDetail",
  data() {
    return {
      info: {},
      second: this,
      url: "",
      srcList: [],
      orderTypeOptions:[]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //获取订单类型
    getOrderType() {
      var reqData = {
        orderType: "",
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_ORDER_TYPE", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.loading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.orderTypeOptions = resReport.data.records;
          this.getData();
        }
      });
    },
    //获取
    getData() {
      var reqData = {
        orderId: this.$route.query.orderId,
        orderNo: this.$route.query.orderNo,
      };
      let reqReport = reqRep({ traCode: "_GET_ORDER", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.info = resReport.data;
          this.srcList.push(resReport.data.orderVoucherPath);
        }
      });
    },
  },
  filters: {
    orderTypeFormatter(c, that) {
      try {
        for (let index = 0; index < that.orderTypeOptions.length; index++) {
          if (c == that.orderTypeOptions[index].orderTypeId) {
            return that.orderTypeOptions[index].orderType;
          }
        }
      } catch (error) {}
    },
    orderStatusFormatter(c) {
      if (c == 0) {
        return "生成订单";
      } else if (c == 1) {
        return "订单处理中";
      } else {
        return "订单完成";
      }
    },
    isInvoiceFormatter(c) {
      if (c === "1") {
        return "未开票";
      } else if (c === "2") {
        return "已开票";
      } else if (c === "0") {
        return "已申请";
      }
    },
    operationObjectTypeFilter(e) {
      if (e == 0) {
        return "企业";
      } else {
        return "个人";
      }
    },
  },
  created() {
    this.getOrderType();
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  margin-right: 5px;
  cursor: pointer;
}
.header span {
  cursor: pointer;
}
.main-content {
  padding: 30px;
}
.content-header {
  display: block;
  color: #333;
  font-size: 16px;
  padding: 30px 0 15px;
  clear: both;
}
.content-header .title {
  display: inline-block;
}
.edit {
  float: right;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
h2 {
  display: block;
  border-top: 1px solid #eee;
  color: #333;
  font-size: 16px;
  padding: 30px 0;
  clear: both;
}
.content-header:first-child {
  border-top: 0;
}
.input-box {
  float: left;
  width: 20%;
  min-width: 352px;
  margin: 15px 40px 15px 0;
  box-sizing: border-box;
}
.operation-box {
  margin-top: 15px;
}
.cancle {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.address {
  width: 610px;
}
.input-box .title {
  display: inline-block;
  margin-right: 10px;
  width: 84px;
  color: #666;
}
.input-box .value {
  color: #333;
  font-weight: bold;
  word-wrap: none;
}
.input-box .title i,
.error {
  color: #f56c6c;
}

.error {
  text-align: center;
}

.button-box {
  clear: both;
  border-top: 1px solid #eee;
  padding: 30px;
}
.button-box div {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.comfirm {
  margin-left: 10px;
  color: #fff;
  background-color: #13cb6e;
}
.el-input,
.el-select {
  width: 228px;
}
.el-form-item {
  width: 260px;
  margin: 0 auto;
}
.tip {
  width: 260px;
  text-align: center;
  background: #ccc;
  padding: 5px 10px;
  margin: 10px auto;
  cursor: pointer;
}
h4 {
  width: 260px;
  margin: 0 auto 22px;
}
</style>
